<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
div#wrapper,div#wrapper div {
	margin-left: 40px;
	margin-top: 5px;
}

div#wrapper div.engine {
	margin-top: 20px;
}

div#wrapper label,div#wrapper input {
	cursor: pointer;
}
</style>

<script type="text/javascript">
  //使用属性初始化界面
  function initOption() {
    if (typeof localStorage.options == "undefined") {
      localStorage.options = JSON.stringify({
        global : {
          enabled  : true,
          ctrlmask : false
        },
        shanbaydict : {
          enabled : true,
          autoadd : false,
          autoplay: true  
        },
        googletran : {
          enabled : true
        },
        wikizh : {
          enabled : true
        },
        wikien : {
          enabled : true
        }
      })
    }

    var options = JSON.parse(localStorage.options);
    for ( var engine in options) {
      for ( var attr in options[engine]) {
        var id = "selection_" + engine + "_" + attr;
        $("#" + id).prop("checked", options[engine][attr]);
        switchCheck(id);
      }
    }
  }
  
  //切换某个选项的选中状态
  function switchCheck(id) {
    var attrs = id.split("_");
    var sid = "#" + id;
    var options = JSON.parse(localStorage.options);
    options[attrs[1]][attrs[2]] = $(sid).prop("checked");
    localStorage.options = JSON.stringify(options);
    if(attrs[2]=="enabled")  // 只有更改引擎的总开关才切换子项
      setChildrenEnabled(id);
  }
  
  //设置某个选项的子项是否可用
  function setChildrenEnabled(id) {
    var sid = "#" + id;
    var disabled = !$(sid).prop("checked") || $(sid).prop("disabled");
    $(sid).parent().children("div").children("input").not($(sid)).each(function() {
      $(this).prop("disabled", disabled);
      setChildrenEnabled(this.id);
    });
  }

  $(function() {
    initOption();
    $("input").click(function() {
      switchCheck(this.id);
    });

    $("label").click(function() {
      var prev = $(this).prev();
      if (prev.prop("disabled"))
        return;

      prev.prop("checked", function(i, val) {
        return !val;
      });

      switchCheck(prev[0].id);
    })
  });
</script>

<title>扇贝Chrome扩展属性设置</title>
</head>
<body>
	<div id="wrapper" style="text-align: center;">
		<div id="body"
			style="text-align: left; width: 500px; left; margin-left: auto; margin-right: auto;">
			<h1>扇贝Chrome扩展属性设置</h1>
			<div id="selection">
				<input id="selection_global_enabled" type="checkbox" /><label>开启划词搜索</label>
				<input id="selection_global_ctrlmask" type="checkbox" /><label>开启Ctrl取词</label>
				<div class="engine">
					<input id="selection_shanbaydict_enabled" type="checkbox" /><label>启用扇贝词典</label>
					<div id="selection_shanbaydict">
						<input id="selection_shanbaydict_autoadd" type="checkbox" /><label>自动添加单词</label>
						<input id="selection_shanbaydict_autoplay" type="checkbox" /><label>自动播放读音</label>
					</div>
				</div>
				<div class="engine">
					<input id="selection_googletran_enabled" type="checkbox" /><label>启用谷歌翻译</label>
					<div id="selection_googletran"></div>
				</div>
				<div class="engine">
					<input id="selection_wikizh_enabled" type="checkbox" /><label>启用维基百科</label>
					<div id="selection_wikizh"></div>
				</div>
				<div class="engine">
					<input id="selection_wikien_enabled" type="checkbox" /><label>启用维基英文</label>
					<div id="selection_wikien"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
